<template>
  <div class="card">
    <div flex flex-wrap justify-start mt-10>
      <a
        v-for="(friend, index) in friends"
        :key="index"
        :href="friend.website"
        target="_blank"
        class="friend"
        :style="randomRGB()"
      >
        <div class="image">
          <img :src="friend.avatar" onerror="this.src = `/src/assets/images/error.png`" />
        </div>
        <div class="content">
          <div class="header">{{ friend.nickName }}</div>
          <div class="description">{{ friend.description }}</div>
        </div></a
      >
    </div>
  </div>
</template>

<script setup>
import { getFriendList } from '@/api/friend.js'

defineOptions({ name: 'friends' })

const friends = ref([])

const bgColor = [
  '#1abc9c',
  '#2ecc71',
  '#3498db',
  '#9b59b6',
  '#34495e',
  '#f1c40f',
  '#e67e22',
  '#e74c3c',
  '#ee5a24',
  '#9980fa',
  '#8c7ae6',
  '#f79f1f',
]

onActivated(() => {
  console.log('onActivated')
  getData()
})
function getData() {
  getFriendList().then((res) => {
    friends.value = res.data
  })
}

function randomRGB() {
  const index = Math.floor(Math.random() * this.bgColor.length)
  return { backgroundColor: this.bgColor[index] }
}
</script>

<style scoped>
a:hover {
  transform: translate(0, -2px);
}

.friend {
  width: calc(100% / 3 - 20px);
  margin: 10px;
  border-radius: 2% !important;
}

.friend .image {
  width: 70px !important;
  margin: 10px auto 0px;
  background: unset !important;
}

.friend .image img {
  border-radius: 100% !important;
  width: 70px !important;
  height: 70px !important;
}

.friend .content {
  text-align: center;
  padding: 10px 14px !important;
  border-top: 0 !important;
}

.friend .content * {
  color: #fff !important;
}

.friend .content .header {
  font-size: 16px !important;
}

.friend .content .description {
  font-size: 12px !important;
}

.friend .content .description {
  margin-top: 5px !important;
  margin-bottom: 7px;
}
</style>
